<template>
  <div class="date">
    <ball-header :leftArrow="false" title="选择日期" :border="false" z-index="5">
      <div slot="left" @click="$router.back(-1)"><van-icon name="arrow-left" size="24" color="#000000" /></div>
    </ball-header>
    <div class="container">
      <van-calendar
        :show-title="false"
        :poppable="false"
        :show-confirm="false"
        :style="{ height: '500px' }"
        :formatter="formatter"
        @select="dateSelect"
      />
    </div>
    <div class="footer">
      <!-- <div class="item1 acea-row row-middle row-between">
        <div class="left acea-row row-column">
          <span>球场球场球场球场球场</span>
          <p>￥3310/人</p>
        </div>
        <van-stepper class="van-right" v-model="num" min="1" />
      </div> -->
      <div class="item2 acea-row row-between" @click="showTime = true">
        <div class="left">选择时间</div>
        <div class="right acea-row row-middle">
          <span v-if="time != ''">{{time}}</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <!-- <div class="item3">
        <van-coupon-cell
          class="item3-coupon"
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          @click="showCoupon = true"
        />
      </div> -->
      <div class="van-item3">
        <van-submit-bar button-text="确定时间" @submit="submit" />
      </div>
    </div>
    <van-popup v-model="showTime" position="bottom" :style="{ height: '40%' }" >
      <van-picker
        title="选择时间"
        show-toolbar
        :columns="columns"
        @confirm="timeConfirm"
      />
      <!-- <van-datetime-picker
        v-model="time"
        type="time"
        title="选择时间"
        :min-hour="0"
        :max-hour="23"
        @confirm="showTime = false"
        @cancel="showTime = false"
      /> -->
    </van-popup>
    <!-- <van-popup
      v-model="showCoupon"
      round
      position="bottom"
      style="height: 90%; padding-top: 4px;"
    >
      <van-coupon-list
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        :disabled-coupons="disabledCoupons"
        :show-exchange-bar="false"
        :show-close-button="false"
        @change=""
      />
      <div class="popGoApp acea-row row-middle">
        <div class="pic"><img :src="logo" alt=""></div>
        <div class="content acea-row row-column">
          <p>小白球，让高尔夫更简单</p>
          <span>快来下载app使用红包吧</span>
        </div>
        <div class="btn">下载</div>
      </div>
    </van-popup> -->
  </div>
</template>

<script>
import ballHeader from 'components/header'
import moment from 'moment'
import logo from 'static/images/logo.png'
import { Toast } from 'vant';

const coupons = [{
  available: 1,
  condition: '无使用门槛\n最多优惠12元',
  reason: '',
  value: 150,
  name: '优惠券名称',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '1.5',
  unitDesc: '元',
}];

export default {
  components:{
    ballHeader
  },
  data() {
    return {
      columns:[],
      maxHour:23,
      minHour:0,
      date:moment().startOf('day').format('X')*1000,
      time:'',
      showTime:false,
      showCoupon:false,
      coupons,
      disabledCoupons: coupons,
      chosenCoupon: -1,
      num:1,
      logo
    }
  },
  created() {
    // console.log(this.time)
    this.setColumns()
  },
  methods: {
    submit(){
      let m = moment(this.date).format("MMM")
      let d = moment(this.date).format("DD")
      let xinqi = moment(this.date).format("dddd")
      let e = moment(this.date).format("E")
      let title = m+d+" "+xinqi
      let time = this.time
      let o = {}
      o.date = {
        date:Math.floor(this.date/1000),
        e,
        title
      }
      if(time == ""){
        Toast.fail("请选择时间")
        return false
      }
      o.time = {
        time,
        title:time+'点'
      }
      sessionStorage.setItem("yuding_teetime",JSON.stringify(o))
      this.$store.commit('yuding/setData',o)
      this.$router.go(-1)
    },
    setColumns(){
      let columns = []
      for(let i=this.limitTime.starttime;i<=this.limitTime.endtime;i++){
        let t = i.toString()
        if(t.length == 1){
          t = '0' + t
        }
        columns.push(t)
      }
      this.columns = columns
    },
    formatter(e){
      let time = new Date(e.date).valueOf()
      const month = e.date.getMonth() + 1;
      const date = e.date.getDate();
      let z = moment(time).format("E")
      // if(z==6||z==7){
      //   e.bottomInfo = '￥4600';
      //   e.className = 'act'
      // }else{
      //   e.bottomInfo = '￥3310';
      // }
      return e
    },
    dateSelect(e){
      this.date = new Date(e).valueOf()
      // console.log(this.date)
    },
    timeConfirm(e){
      this.time = e
      this.showTime = false
    }
  },
  computed:{
    limitTime(){
      return this.$store.state.yuding.limitTime
    },
  }
}
</script>

<style scoped>
  .date .container >>> .van-calendar__bottom-info{
    font-size: 11px;
  }
  .date .container >>> .act .van-calendar__bottom-info{
    color: #ff6600;
  }
  .date .container >>> .act .van-calendar__selected-day .van-calendar__bottom-info{
    color: #ffffff;
  }
  .date .footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background-color: #ffffff;
  }
  .date .footer .item1{
    padding: 20px 20px 20px 40px;
    border-top: 1px solid #dddddd;
  }
  .date .footer .item1 .left{
    font-size: 26px;
  }
  .date .footer .item1 .left span{
    overflow: hidden;
    text-overflow:ellipsis; 
    white-space: nowrap;
  }
  .date .footer .item1 .left p{
    margin-top: 20px;
  }
  .date .footer .item1 .van-right{
    height: 22px;
  }
  .date .footer .item2{
    padding: 30px 20px 30px 40px;
    border-top: 1px solid #dddddd;
  }
  .date .footer .item2 .right span{
    margin-right: 20px;
  }
  .date .footer .van-item3{
    height: 50px;
    border-top: 1px solid #dddddd;
  }
  .date .footer .item3{
    border-top: 1px solid #dddddd;
  }
  .date .footer .item3 >>> .item3-coupon{
    padding: 20px 20px 20px 40px;
  }
  .date .popGoApp{
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: #6ecf9d;
    padding: 10px 50px 10px 20px;
    box-sizing: border-box;
    z-index: 1000;
  }
  .date .popGoApp .pic{
    width: 80px;
    height: 80px;
  }
  .date .popGoApp .content{
    color: #ffffff;
    margin-left: 10px;
    flex: 1;
  }
  .date .popGoApp .content p{
    font-size: 24px;
  }
  .date .popGoApp .content span{
    font-size: 30px;
    margin-top: 10px;
  }
  .date .popGoApp .btn{
    width: 150px;
    height: 50px;
    background-color: #ffffff;
    color: #125432;
    line-height: 50px;
    text-align: center;
    border-radius: 50px;
    font-size: 26px;
  }
</style>